import React, { useState, useEffect } from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';
import { Home, Map, Languages, Download, Settings, User, Menu, X } from 'lucide-react';

const Layout: React.FC = () => {
  const location = useLocation();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isTablet, setIsTablet] = useState(false);

  // 监听窗口大小变化，判断是否为平板设备
  useEffect(() => {
    const handleResize = () => {
      setIsTablet(window.innerWidth >= 768 && window.innerWidth < 1024);
    };

    // 初始化
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const navigation = [
    { name: '首页', href: '/', icon: Home },
    { name: '地图', href: '/map', icon: Map },
    { name: '翻译', href: '/translation', icon: Languages },
    { name: '离线内容', href: '/offline', icon: Download },
    { name: '设置', href: '/settings', icon: Settings },
    { name: '个人资料', href: '/profile', icon: User },
  ];

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* 顶部导航栏 - 响应式设计 */}
      <nav className="bg-white shadow-sm border-b sticky top-0 z-50 transition-all duration-300">
        <div className="w-full mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            {/* Logo 和标题 */}
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <h1 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-gray-900 truncate">
                  多语言旅行助手
                </h1>
              </div>
            </div>

            {/* 桌面端导航 */}
            <div className="hidden lg:flex lg:items-center lg:space-x-8">
              {navigation.map((item) => {
                const Icon = item.icon;
                const isActive = location.pathname === item.href;
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    className={`${
                      isActive
                        ? 'border-blue-500 text-blue-600'
                        : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
                    } inline-flex items-center px-3 py-2 border-b-2 text-sm font-medium transition-colors duration-200`}
                  >
                    <Icon className="h-4 w-4 mr-2" />
                    {item.name}
                  </Link>
                );
              })}
            </div>

            {/* 平板端导航 - 紧凑显示 */}
            <div className="hidden md:flex lg:hidden items-center space-x-1">
              {navigation.map((item) => {
                const Icon = item.icon;
                const isActive = location.pathname === item.href;
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    className={`${
                      isActive
                        ? 'bg-blue-50 text-blue-600'
                        : 'text-gray-500 hover:bg-gray-100'
                    } p-2 rounded-md transition-colors duration-200`}
                    aria-label={item.name}
                  >
                    <Icon className="h-5 w-5" />
                  </Link>
                );
              })}
            </div>

            {/* 移动端汉堡菜单按钮 */}
            <div className="md:hidden flex items-center">
              <button
                onClick={toggleMobileMenu}
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
              >
                {isMobileMenuOpen ? (
                  <X className="h-6 w-6" />
                ) : (
                  <Menu className="h-6 w-6" />
                )}
              </button>
            </div>
          </div>

          {/* 移动端下拉菜单 */}
          {isMobileMenuOpen && (
            <div className="md:hidden border-t border-gray-200 py-2 animate-fade-in-down">
              <div className="flex flex-col space-y-1 px-2">
                {navigation.map((item) => {
                  const Icon = item.icon;
                  const isActive = location.pathname === item.href;
                  return (
                    <Link
                      key={item.name}
                      to={item.href}
                      onClick={() => setIsMobileMenuOpen(false)}
                      className={`${
                        isActive
                          ? 'bg-blue-50 text-blue-600 border-l-4 border-blue-500'
                          : 'text-gray-700 hover:bg-gray-50'
                      } flex items-center px-4 py-3 text-base font-medium transition-colors duration-200`}
                    >
                      <Icon className="h-5 w-5 mr-3 flex-shrink-0" />
                      {item.name}
                    </Link>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </nav>

      {/* 主要内容区域 - 桌面端全宽布局 */}
      <main className="flex-1 w-full">
        <div className="w-full h-full max-w-none">
          <Outlet />
        </div>
      </main>

      {/* 移动端底部导航 - 仅在小屏幕显示 */}
      <nav className="sm:hidden bg-white border-t border-gray-200 sticky bottom-0 z-50">
        <div className="grid grid-cols-6 gap-0">
          {navigation.map((item) => {
            const Icon = item.icon;
            const isActive = location.pathname === item.href;
            return (
              <Link
                key={item.name}
                to={item.href}
                className={`${
                  isActive 
                    ? 'text-blue-600 bg-blue-50' 
                    : 'text-gray-400 hover:text-gray-600'
                } flex flex-col items-center justify-center py-2 px-1 min-h-[60px] transition-colors duration-200`}
              >
                <Icon className="h-5 w-5 mb-1" />
                <span className="text-xs font-medium leading-tight text-center">
                  {item.name}
                </span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
};

export default Layout;
